import { Tab, Tabs, TabsProps } from "@mui/material"
import { FC } from "react"
import { useNavigate } from "react-router-dom"
import { tabs } from "@widgets/bar/const/tabs.ts"
import { useMatchLocation } from "@shared/lib/hooks/useMatchLocation"

interface BarProps extends TabsProps {}

export const Bar: FC<BarProps> = (props) => {
    const navigate = useNavigate()
    const match = useMatchLocation()

    return (
        <Tabs
            value={match}
            sx={{ display: { xs: "none", md: "block" } }}
            {...props}
        >
            {tabs.map((tab) => (
                <Tab
                    key={tab.value}
                    label={tab.label}
                    value={tab.value}
                    onClick={() => navigate(tab.value)}
                />
            ))}
        </Tabs>
    )
}
